<template>
    <div class="sdy-home-nav-list">
    <!-- 导航组件 -->
    <van-swipe 
    class="swiper-container" 
    :duration="300"
    :loop="false"
    indicator-color="red">
        <van-swipe-item>
            <!-- 宫格展示 -->
         <van-grid :border="false" :column-num="5">
            <van-grid-item 
            v-for="item in navs" 
            :key="item.id" 
            :icon="item.img" 
            :text="item.title" />
         </van-grid>
        </van-swipe-item>
        <van-swipe-item>
            <!-- 宫格展示 -->
         <van-grid :border="false" :column-num="5">
            <van-grid-item 
            v-for="item in navs" 
            :key="item.id" 
            :icon="item.img" 
            :text="item.title" />
         </van-grid>
        </van-swipe-item>
    </van-swipe>
    </div>
 </template>
 <script setup lang="ts">
const navs = [
    {id:1,title:'啥都超市',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png'},
    {id:2,title:'啥都超市',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png'},
    {id:3,title:'啥都超市',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png'},
    {id:4,title:'啥都超市',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png'},
    {id:5,title:'啥都超市',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png'},
    {id:6,title:'啥都超市',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png'},
    {id:7,title:'啥都超市',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png'},
    {id:8,title:'啥都超市',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png'},
    {id:9,title:'啥都超市',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png'},
    {id:10,title:'啥都超市',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png'},
   
 ]
 </script>
 <style lang="scss">
 .sdy-home-nav-list {
    height: 210px;
    box-sizing: border-box;
    padding: 15px;
    > .swiper-container{
        height: 100%;
    }
 }
 </style>